<style scoped lang="scss">
	.warp {
		min-height: 100vh;
		background-color: #dd3939;
	}

	.header-box {
		padding: 10px;
	}

	.uqrcode-hide {
		position: fixed;
		left: 7500rpx;
	}

	.h-section {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		border-radius: 10px;
		padding: 10px 0;
	}

	.h-s-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 5px 0;
	}

	.h-s-price {
		font-size: 18px;
		color: #fd010e;
	}

	.h-s-info {
		font-size: 12px;
		color: #757575;
	}

	.h-s-btn {
		border: 1px solid #afaf39;
		padding: 10px 30px;
		border-radius: 30px;
		color: #fd010e;
	}

	.body-box {
		padding: 2px 10px;
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.b-box {
		width: 50%;
		padding: 1px;
		box-sizing: border-box;
		position: relative;
	}

	.b-share {
		position: absolute;
		bottom: 10px;
		right: 10px;
	}

	.b-img {
		width: 100%;
		height: 200px;
	}

	.p-img {
		min-height: 400px;
	}

	.p-bottom {
		display: flex;
		justify-content: space-around;
	}

	.rule {
		position: fixed;
		top: 50px;
		right: 0;
		writing-mode: vertical-lr;
		text-align: center;
		width: 20px;
		background-color: #e57c26;
		padding: 10px 2px;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		font-size: 12px;
		color: #f1f1f1;
	}

	.rule-box {
		padding: 10px;
		border-radius: 0 0 10px 10px;
		background-color: #f9f9f9;
		min-height: 200px;
	}

	.uqrcode-hide {
		position: fixed;
		left: 7500rpx;
	}
</style>
<template>
	<view class="warp">
		<view class="header-box">
			<view class="h-section">
				<view class="">我的邀请奖励</view>
				<view class="h-s-box">
					<view class="h-s-price">￥{{userInfo.money/100 || 0}}</view>
					<view class="h-s-info">我的奖励(元)</view>
				</view>
				<view class="h-s-btn" @click="navigator">查看我的邀请详情</view>
			</view>
		</view>
		<view class="rule" @click="onRule">
			活动规则
		</view>
		<view class="body-box">
			<view class="b-box" v-for="(item,index) in shareData" :key="index" @click="shareClick(item)">
				<image class="b-img" :src="item.bg_img" mode="aspectFill"></image>
				<!-- <uni-tag text="分享二维码" class="b-share"></uni-tag> -->
			</view>
		</view>
		<view class="uqrcode-hide">
			<canvas id="canvasid" canvas-id="canvasid"
				style="width: 320px;height: 600px;background-color: #fff;"></canvas>
		</view>
		<uni-popup ref="popupShare" type="center" mask-background-color="rgba(0,0,0,0.8)">
			<view class="p-box">
				<image :src="img" mode="aspectFit" class="p-img"></image>
				<view class="p-bottom">
					<button size="mini" @click="cancal">分享给朋友</button>
					<button type="primary" size="mini" @click="save">保存到相册</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupRule" type="top">
			<view class="rule-box">
				<rich-text :nodes="sysSetting.rules"></rich-text>
			</view>
		</uni-popup>
		<!-- <uqrcode :size="200"  ref="uqrcode" canvas-id="qrcodeid" :value="str" :options="{ margin: 10 }"></uqrcode> -->
		<canvas id="canvasQr" canvas-id="canvasQr" class="uqrcode-hide" style="width: 500px;height: 500px;"></canvas>
	</view>
</template>

<script>
	const db = uniCloud.database();
	/* 引入uQRCode核心js */
	import UQRCode from '@/common/uqrcode/uqrcode.js';
	// import {
	// 	pathToBase64
	// } from '@/js_sdk/image-tools/index.js'
	import {
		useUserStore
	} from "@/pinia/user.js"
	import {
		mapState
	} from "pinia"
	import logo from "@/static/logo.png"
	export default {
		data() {
			return {
				shareData: [],
				qrUrl: '',
				ctx: '',
				img: '',
				avatar: ''
			}
		},
		onLoad() {
			this.loadData()
		},
		onReady() {
			console.log("userInfo", this.userInfo)
		},
		computed: {
			...mapState(useUserStore, ['sysSetting', "userInfo"]),
			// str(){
			// 	return `inviteCode=${this.userInfo.my_invite_code}`
			// }
		},
		methods: {
			navigator() {
				uni.navigateTo({
					url: "/pages/share/list"
				})
			},
			onRule() {
				this.$refs.popupRule.open()
			},
			loadData() {
				db.collection("wolf-share").where(`is_book==0 || is_book==null`).orderBy("create_time desc").get().then(res => {
					// console.log(res.result.data)
					this.shareData = [...res.result.data]
				})
			},
			async shareClick(data) {
				// console.log("data", data,this.userInfo)
				uni.showLoading()
				let qrData
				if (!this.qrUrl) {
				let str = `http://hunlianqr.hnyiyiwang.cn?inviteCode=${this.userInfo.my_invite_code}`
				    qrData = this.qrUrl = await this.draw(str)
				} else {
					qrData = this.qrUrl
				}
				console.log("qrData", qrData)
				let avatar
				if (!this.avatar && this.userInfo.avatar_file?.url) {
					avatar = this.avatar = await this.downImage(this.userInfo.avatar_file.url)
				} else {
					avatar = this.avatar
				}

				this.ctx = uni.createCanvasContext('canvasid', this)
				let _that = this
				let bgImg = await this.downImage(data.bg_img)
				this.ctx.drawImage(bgImg, 0, 0, 320, 600)
				this.ctx.drawImage(qrData, data.qr_info.x, data.qr_info.y, 100, 100)
				console.log("bgImg", bgImg, data)
				if (data.is_avatar) {
					this.ctx.drawImage(avatar, data.avatar.x, data.avatar.y, 50, 50)
				}
				if (data.is_invite) {
					this.ctx.setFontSize(14)
					this.ctx.fillText(this.userInfo.my_invite_code, data.invite.x, data.invite.y, 60)
				}
				if (data.is_nick) {
					let nStr = "匿名用户"
					if (this.userInfo.nickname) {
						nStr = this.userInfo.nickname
					}
					this.ctx.setFontSize(16)
					this.ctx.fillText(nStr, data.nickName.x, data.nickName.y, 100)
				}
				this.ctx.draw()
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: 320,
					height: 600,
					fileType: "png",
					canvasId: 'canvasid',
					success: function(res) {
						// uni.hideLoading()
						_that.img = res.tempFilePath
						_that.$refs.popupShare.open()
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			async downImage(url) {
				return await new Promise((resolve, reject) => {
					uni.downloadFile({
						url,
						success: async (res) => {
							if (res.statusCode === 200) {
								resolve(res.tempFilePath)
								// _that.drawQR(res.tempFilePath, qrData, data)
							}
						}
					});
				})
			},
			cancal() {
				console.log("img", this.img)
				const _that = this
				wx.showShareImageMenu({
					path: _that.img
				})
			},
			save() {
				const _that = this
				uni.saveImageToPhotosAlbum({
					filePath: this.img,
					success: res1 => {
						uni.showToast({
							title: "保存成功",
							icon: "none"
						})
						_that.close()
						console.log("res1", res1)
					},
					fail: err1 => {
						console.log("err1", err1)
					},
					complete: () => {
						// _that.$refs.popupShare.close()
						console.log("complete")
					}
				});
			},
			async draw(data) {
				const _that = this
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = data;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 500;
				qr.margin = 10
				qr.backgroundColor = 'rgba(255,255,255,0)'
				// 调用制作二维码方法
				qr.make();
				const canvasContext = uni.createCanvasContext("canvasQr", this);
				canvasContext.clearRect(0, 0, 500, 500)
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
				return await new Promise((resolve, reject) => {
					setTimeout(()=>{
						uni.canvasToTempFilePath({
								canvasId: "canvasQr",
								fileType: "png",
								x: 0,
								y: 0,
								width: 500,
								height: 500,
								success: res => {
									_that.qrUrl = res.tempFilePath
									resolve(res.tempFilePath);
									_that.qrUrl = res.tempFilePath
								},
								fail: err => {
									console.log(err);
								},
								complete: () => {
									console.log("complete");
								}
							},
							_that
						);
					},500)
					
				});
			}
		}
	}
</script>